<div class="meta">
  <div>
    <h5>表单配置</h5>
    <div class="meta-form-config">
      <div nz-row>
        <div nz-col [nzSpan]="12">
          <div nz-col [nzSpan]="3">表单用途</div>
          <div nz-col [nzSpan]="10">
            <nz-checkbox-group [(ngModel)]="formpurpose"></nz-checkbox-group>
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="12">
          <div nz-col [nzSpan]="3">生成接口</div>
          <div nz-col [nzSpan]="20">
            <nz-checkbox-group [(ngModel)]="formInterface"></nz-checkbox-group>
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="12">
          <div nz-col [nzSpan]="3" style="margin-top: 3px;">
            <p>每行列数</p>
          </div>
          <div nz-col [nzSpan]="10">
            <nz-select [nzPlaceHolder]="'请选择每行列数'" [nzShowSearch]="true" style="width: 124px;" [(ngModel)]="rowColNum">
              <nz-option [nzLabel]="1" [nzValue]="1"></nz-option>
              <nz-option [nzLabel]="2" [nzValue]="2"></nz-option>
              <nz-option [nzLabel]="3" [nzValue]="3"></nz-option>
              <nz-option [nzLabel]="4" [nzValue]="4"></nz-option>
            </nz-select>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <h5>字段配置</h5>
    <div class="meta-row-config">
      <div nz-row>
        <div nz-col [nzSpan]="12">
          <div nz-col [nzXs]="24" [nzSm]="5">
            <label nz-checkbox [(ngModel)]="allChecked" (ngModelChange)="updateAllChecked()" [nzIndeterminate]="indeterminate">
              <span>全选</span>
            </label>
          </div>
          <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
            <span>字段注释</span>
          </div>
          <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
            <span>字段类型</span>
          </div>
          <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
            <span>是否必填</span>
          </div>
        </div>
      </div>
      <div nz-row>
        <ng-container class="meta-col-config" *ngFor="let r of rowConfig">
          <div nz-col [nzSpan]="12" class="col-config">
            <div nz-col [nzXs]="24" [nzSm]="5">
              <label class="row-label">
                <input type="checkbox" [(ngModel)]="r.need">{{r.code}}</label>
            </div>
            <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
              <nz-input [(ngModel)]="r.desc"></nz-input>
            </div>
            <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
              <nz-select [nzPlaceHolder]="'字段类型'" [nzShowSearch]="true" style="width: 124px;" [(ngModel)]="r.type">
                <nz-option [nzLabel]="'文本框'" [nzValue]="'text'"></nz-option>
                <nz-option [nzLabel]="'数字框'" [nzValue]="'number'"></nz-option>
                <nz-option [nzLabel]="'选择框'" [nzValue]="'select'"></nz-option>
                <nz-option [nzLabel]="'日期'" [nzValue]="'date'"></nz-option>
                <nz-option [nzLabel]="'密码框'" [nzValue]="'password'"></nz-option>
                <nz-option [nzLabel]="'文件'" [nzValue]="'file'"></nz-option>
              </nz-select>
            </div>

            <div nz-col [nzXs]="24" [nzSm]="5" style="margin-left: 10px;">
              <nz-select [nzPlaceHolder]="'字段是否必填'" [nzShowSearch]="true" style="width: 124px;" [(ngModel)]="r.require">
                <nz-option [nzLabel]="'是'" [nzValue]="'true'"></nz-option>
                <nz-option [nzLabel]="'否'" [nzValue]="'false'"></nz-option>
              </nz-select>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>

  <div>
    <h5>表单预览</h5>
    <div class="meta-form-preview">
      <div nz-row>
        <div nz-col [nzSpan]="12">
          <div nz-col [nzSpan]="4">
            <button nz-button (click)="preview()">
              <span>表单预览</span>
            </button>
          </div>
          <div nz-col [nzSpan]="4">
            <button nz-button [nzType]="'primary'" (click)="makeSure()">
              <span>生成表单</span>
            </button>
          </div>
        </div>
      </div>
      <div nz-row style="margin-top: 10px;" *ngIf="ishow">
        <pack-from [config]="config"></pack-from>
      </div>
    </div>
  </div>
</div>